<script setup>
import { ref ,watch } from 'vue';
import { useRouter } from 'vue-router';
import { useAccountStore } from '@/stores/accountStore';

const searchKeyword = ref('');
const router = useRouter();

const accountStore = useAccountStore();
//组件加载时恢复登录状态
accountStore.restoreLoginState()
// 点击搜索时跳转
const handleSearch = () => {
  if (searchKeyword.value.trim()) {
    router.push({ path: '/search', query: { query: searchKeyword.value } });
  }
};

// // 检查是否已登录
// const isLoggedIn = computed(() => {
//   return localStorage.getItem('token') !== null;
// });

</script>
<template> 
    <div id="Header">
      <!-- Logo -->
      <div id="Logo">
        <div id="LogoContent">
          <router-link :to="{ name: 'Main' }">
            <img src="../assets/images/logo-topbar.PNG" />
          </router-link>
        </div>
      </div>
  
      <!-- 菜单栏 -->
      <div id="Menu">
        <div id="MenuContent">

          <!-- 登录状态下的菜单 -->
          <template v-if="accountStore.isLoggedIn">
          <!-- 购物车 -->
          <router-link 
              :to="{ name: 'Cart', query: { username: accountStore.username } }">
              <img src="../assets/images/cart.PNG" />
            </router-link>
            <img src="../assets/images/separator.gif" />
            <!-- 我的账户 -->
            <router-link :to="{name:'MyAccount'}">My Account</router-link>
            <img src="../assets/images/separator.gif" />
            <!-- 退出 -->
            <!-- <router-link to="/account/edit">Log Out</router-link> -->
            <a href="#" @click.prevent="accountStore.logout()">Log out</a>
            <img src="../assets/images/separator.gif" />  
          </template>

          <!-- 未登录状态 -->
          <template v-else>
          <!-- 购物车 -->
          <router-link :to="{ name: 'Cart' }">
              <img src="../assets/images/cart.PNG" />
            </router-link>
            <img src="../assets/images/separator.gif" />
            <!-- 登录 -->
            <router-link :to="{name:'SignOn'}">Sign In</router-link>
            <img src="../assets/images/separator.gif" />
          </template>

          <router-link to="/help" id="help">?</router-link>
        </div>
      </div>
  
      <!-- 搜索栏 -->
      <div id="Search">
        <div id="SearchContent">
          <input
            type="text"
            v-model="searchKeyword"
            placeholder="请输入关键字"
            size="20"
            id="keyword"
            autocomplete="off"
          />
          <button @click="handleSearch" id="submit">Search</button>
        </div>
      </div>
      <!-- 搜索栏 -->  
      <!-- 快捷导航 -->
    <div id="QuickLinks">
      <router-link :to="{ name: 'Category', params: { categoryId: 'MAIN' } }">
            <img src="../assets/images/main_cam.PNG" />
        </router-link>
        <img src="../assets//images/separator.gif" />
        <router-link :to="{ name: 'Category', params: { categoryId: 'SOUTH' } }">
          <img src="../assets/images/south_cam.PNG" />
        </router-link>
        <img src="../assets//images/separator.gif" />
        <router-link :to="{ name: 'Category', params: { categoryId: 'NEW' } }">
          <img src="../assets/images/new_cam.PNG" />
        </router-link>
    </div>
</div>
</template>

<style scoped></style>